<template>
    <div class="time-set wrap">
        <div class="title">
            <p>Please mark the period of time when the class can not be stable for a long time, and the systems will not provide school schedule anymore.<span>（Default to all selected, that is, all hours can be scheduled. Mouse slides to change the selected state.）</span></p>
        </div>
        <div class="table-box" v-loading="loading">
            <table>
                <thead>
                    <tr>
                        <th>Local time</th>
                        <th v-for="thead in theadList">{{ thead }}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in tableList">
                        <td width="127">{{ moment(timeList[index].Starttime).format('HH:mm') }}</td>
                        <td width="119" :class="{checked: td.enable}" v-for="td in item" @mousedown.prevent="check(td)" @mouseenter="fastCheck(td)">
                            <div :class="['check-box', {checked: td.enable}]"></div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <el-row>
            <el-button type="primary" @click="save">Save</el-button>
        </el-row>
    </div>
</template>

<script>
import { constants } from 'fs';
    export default {
        name: 'TimeSet',
        data() {
            return {
                loading: false,
                timeList: [],
                tableList: [],
                theadList: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
                isMoveCheck: false,
                sortIndex: 0
            }
        },
        created() {
            this.getData()
        },
        methods: {
            // 初始化数据
            async getData() {
                this.loading = true

                // 获取时段
                let { TimetableInfo } = await this.axios.get('/OnlineTeacher/CourseTimetable/GetOnlineTimeList')
                
                // 获取时段状态
                let { TimetableInfo:data } = await this.axios.get('/OnlineTeacher/CourseTimetable/GetForeignTeacherClassTimeList')

                this.loading = false
                
                let index = 0
                let newData = []

                while(index < data.length) newData.push(data.slice(index, index += 7))

                // 获取时间段的截取位置
                for (let i = TimetableInfo.length - 1; i > 1; i--) {
                    if (new Date(TimetableInfo[i].Starttime).getHours() < new Date(TimetableInfo[i - 1].Starttime).getHours()) {
                        this.sortIndex = i
                        break
                    }
                }

                if (this.sortIndex) {
                    TimetableInfo = TimetableInfo.slice(this.sortIndex).concat(TimetableInfo.slice(0, this.sortIndex))
                    newData = newData.slice(this.sortIndex).concat(newData.slice(0, this.sortIndex))
                }

                this.timeList = TimetableInfo
                this.tableList = newData
            },
            // 选择时段是否禁用
            check(time) {
                this.isMoveCheck = true
                time.enable = !time.enable
                sessionStorage.setItem('isEdit', true)
            },
            // 快速选择时段是否禁用
            fastCheck(time) {
                if (this.isMoveCheck) time.enable = !time.enable

                document.addEventListener('mouseup', () => this.isMoveCheck = false)
            },
            // 保存
            async save() {
                let ids = []

                for (let i = 0; i < this.tableList.length; i++) {
                    for (let j = 0; j < this.tableList[i].length; j++) {
                        if (this.tableList[i][j].enable) {
                            ids.push(this.tableList[i][j].id)
                        }
                    }
                }
                
                ids = ids.join(',')

                const res = await this.axios.get(`/OnlineTeacher/CourseTimetable/UpdateForeignTeacherTimeStatus?Ids=${ids}`)

                if (res.code === 1) {
                    this.$message.success('Save successful!')
                    sessionStorage.removeItem('isEdit')
                } else {
                    this.$message.success('Save failed!')
                }
            }
        },
        mounted() {
            window.onbeforeunload = ev => {
                if (this.$route.fullPath.toLowerCase() == '/setting/timeset' && sessionStorage.isEdit) {
                    ev = window.event || ev

                    if (ev) ev.returnValue = 'You have made changes not saved whether to leave?'

                    return 'You have made changes not saved whether to leave?'
                }
            }
        },
        destroyed() {
            sessionStorage.removeItem('isEdit')
        }
    }
</script>

<style scoped>
    .wrap {width: 1000px; min-height: 462px; border-radius: 4px; background: #fff; float: right; padding: 20px 20px 30px;}
    .title {font-size: 18px; color: #000; line-height: 26px; text-align: justify;}
    .title span {color: #EB3C3C;}
    .check-box {width: 16px; height: 16px; border-radius: 50%; background: #F1F2F4; border: 1px solid #9B9B9B; margin: 0 auto;}
    .check-box.checked {background: #8CCD44; border-color: #8CCD44; position: relative;}
    .check-box.checked::before {position: absolute; content: ''; width: 7px; height: 3px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; left: 3px; top: 4px; transform: rotate(-45deg);}
    table {width: 100%; margin-top: 10px; border-collapse: collapse; border-spacing: 0;}
	table thead tr th {height: 50px; background: #D3E7FF; border-color: #5999E4;}
	table tr > * {height: 30px; border: 1px solid #BCDBFF; font-size: 12px; color: #00030A; text-align: center; position: relative; background: #f8f8f8;}
	table tr > *:first-child {border-color: #5999E4; background: #D3E7FF;}
    td.checked {background: #fff;}
    .el-row {text-align: center; margin: 20px auto 0;}
    .el-row .el-button{background: #4D84FC; box-shadow: 0 0 12px #4D84FC;}
</style>